<template>
  <div class="device-list">
    <div class="device-list-header">
      <DynamicForm ref="dynamicFormRef" type="search" @click="callBack" :rulesForm="state.deviceForm"
                   :refresh="state.refresh"/>
    </div>
    <div class="device-list-table">
      <DynamicTable ref="dynamicTableRef"
                    :columns="device"
                    :table="state.table"
                    :data="state.data"
                    @click="callBack"/>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {ref, onMounted, reactive} from 'vue';
import DynamicTable from '@/components/layout/table/dynamic-table.vue';
import DynamicForm from '@/components/layout/form/dynamic-form.vue';

import {useRouter} from 'vue-router';

import {deviceColumns} from '@/assets/script/monitor/columns/device';
import {deviceForm} from '@/assets/script/monitor/forms/device/device-list-form';

const router = useRouter()

import {listDevicePageApi} from '@/api/device';
import {listConstByDictionaryCodesApi} from "@/api/dictionary";

const dynamicTableRef = ref(DynamicTable)
const dynamicFormRef = ref(DynamicForm)

const device = deviceColumns

const state = reactive({
  data: [] as any,
  table: {
    total: 0,
    pageSize: 15,
    pageIndex: 1
  },
  deviceForm: deviceForm,
  storey: [] as any,
  floor: [] as any,
  room: [] as any,
  refresh: 0 as number,
  searchData: {} as any,
  row: {} as any
})

onMounted(() => {
  listDeviceType()
  listDevicePage()
})

const callBack = (data: any) => {
  switch (data.type || '') {
    case 'see':
      router.push({
        path: '/device/details', query: {
          id:data.data.id
        }
      })
      break
    case 'submit':
      state.searchData = data.data
      if (state.searchData) {
        state.searchData['name'] = state.searchData['bedName']
      }
      listDevicePage(state.searchData)
      break
    case 'rest':
      state.searchData = {}
      state.table.pageIndex = 1
      state.table.pageSize = 15
      listDevicePage()
      break
    case 'page':
      if (!state.searchData) {
        state.searchData = {}
      }
      state.searchData['pageIndex'] = data.data
      state.searchData['pageSize'] = state.table.pageSize
      state.table.pageIndex = data.data
      listDevicePage(state.searchData)
      break
    case 'pageSize':
      if (!state.searchData) {
        state.searchData = {}
      }
      state.searchData['pageIndex'] = state.table.pageIndex
      state.searchData['pageSize'] = data.data
      state.table.pageSize = data.data
      listDevicePage(state.searchData)
      break
  }
}

const listDevicePage = (params = {pageIndex: 0, pageSize: 15}) => {
  listDevicePageApi(params).then((data: any) => {
    data.data.forEach((e: any) => {
      if (e.registerTime) {
        e['offlineStatus'] = 1
      } else {
        e['offlineStatus'] = 0
      }
    })
    state.data = data.data
    state.table.total = data.total
  })
}

const listDeviceType = (params = ['device']) => {
  listConstByDictionaryCodesApi(params).then((data: any) => {
    let item = state.deviceForm[0].card.find((f: any) => f.name === 'constCode')
    data.forEach((e: any) => {
      if(e.status === 1) {
        item?.options?.push({label: e.constName, value: e.constCode})
      }
    })
  })
}
</script>